<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios常用配置以及默认配置</title>
  </head>
  <body>
    <button>战士</button>
    <button>法师</button>
    <!-- 
    接口: http://api.xiaohigh.com/lol?q=战士  
          http://api.xiaohigh.com/duanzi
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script>

      /* 
      axios发请求的配置
      针对某个特定请求的配置
        axios(config)
        axios.get/delete(url, config)
        axios.post/put(url, data, config)
          url: 请求地址, 可以param参数和query参数
          method: 请求方式
          params: query参数  值为{}
          data: 请求体参数
            json格式  值为对象
            query字符串格式  值为字符串
          headers: 请求头   值为{}
          
      针对axios发出的所有请求的配置 ==> 指定默认配置
          axios.defaults.属性名= 属性值
          baseURL: 基础路径
          timeout: 超时时间  1000*3

      项目中会做axios二次封装
        
      */
      axios.defaults.baseURL = 'http://api.xiaohigh.com' // 基础路径
      axios.defaults.timeout = 2*1000 // 超时时间  一旦超时了请求就会报错


      const btns = document.querySelectorAll('button')

      btns[0].onclick = async function () {
        try {
          const response = await axios({
            // baseURL: 'http://api.xiaohigh.com',
            url: '/lol',
            method: 'GET',
            params: {
              q: '战士'
            },
            headers: {
              name: 'aaa'
            }
          })
          console.log(response.data)
        } catch (error) {
          alert(error.message)
        }
        
      }
      btns[1].onclick = async function () {
        const response = await axios({
          // baseURL: 'http://api.xiaohigh.com',
          url: '/lol',
          method: 'GET',
          params: {
            q: '法师'
          },
          headers: {
            name: 'bbb'
          }
        })
        console.log(response.data)
      }
    </script>
  </body>
</html>
